<template>
  <div class="cart">
   <!-- 顶部标题栏 -->
    <top-header :isLeft="true" title="购物车"></top-header>
    <!-- 当购物车不为空时  展示商品信息 -->
    <div class="cart_list" v-if="cartlist.length > 0">
      <ul>
       <li v-for="(item,index) in cartlist" :key="index">
        <van-swipe-cell>
        <van-checkbox v-model="item.isCheck" @click="change(item.id)" ></van-checkbox>
        <van-image width="100px" height="100px" fit="fill" :src="item.img" />
        <div class="info">
          <p>{{item.name}}</p>
          <p>{{item.content}}</p>
          <p style="color:#f00;">￥{{item.price/100  }}
            <van-stepper theme="round" button-size="22" disable-input v-model="item.count" />
          </p>
        </div>
        <template #right>
           <van-button square text="删除" type="danger" class="delete-button" @click="del(item.id)" />
        </template>
        </van-swipe-cell> 
       </li>
      </ul>
    </div>
    <!-- 当购物车为空时 -->
    <div class="img" v-if="cartlist.length == 0">
      <img :src="img" />
      <div></div>
    </div>
    <!-- 底部支付组件 -->
    <cart-pay></cart-pay>
  </div>
</template>
   
<script>
import CartPay from '../components/CartPay.vue';
import TopHeader from "../components/TopHeader.vue";
export default {
  components: { TopHeader, CartPay },
   data() {
     return {
       img: require("../assets/imgs/gouwuc.jpg"),
     }
   },
   computed:{
     cartlist(){
      return this.$store.getters.cartlist;
    }
   },
   methods: {
     //改变支付状态
     change(id){
        this.$http.get("/work/box-horse/changecartlist.php", {
          params: {
            id: id,
          }, 
        })
        .then((res) => {
          console.log("成功");
        })
        .catch((err) => {
          console.log(err);
        });
     },
     del(id){
      // 询问用户是否删除所有的数据
      this.$dialog.confirm({
        title: '提示',
        message: '你确认移除此商品吗?'
      }).then(() => {
         this.$http.get("/work/box-horse/cartdelet.php", {
          params: {
            id: id,
          }, 
        })
        .then((res) => {
          console.log("删除成功");
          this.$router.go(0);
        })
        .catch((err) => {
          console.log(err);
        });
      }).catch(() => {})
    }
   },
   mounted() {
     this.$http
      .post("/work/box-horse/cartlist.php")
      .then((res) => {
        console.log(res);
        //this.cartlist = res.data.data;
        this.$store.dispatch("todocartlist",res.data.data)
      })
      .catch((err) => {});
   },
}

</script>
<style lang="scss" scoped>
    ul li {
        margin-bottom: 10px;
        width: 100%;
        height: 100px; 
        padding: 0 5px;
        background-color: white;
      .van-checkbox {
        width: 30px;
        height: 30px;
        float: left;
        margin-top: 30px;
      }
    }
     .delete-button {
       height: 100px;
     }
    .van-image {
      float: left;
      vertical-align: middle;
    }
    .info {
      width: 235px;
      float: left;
      padding-left: 10px;
      p {
        line-height: 30px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin: 0;
      }
    }
    .van-stepper {
      display:inline-block;
      padding-left: 90px;
    }

.img {
  height: calc(100% - 96px);
  background-color: #f2f2f2;
  img {
    width: 100%;
  }
  div {
    width: 100%;
    height: 3rem;
    background-color: #f2f2f2;
  }
}
</style>